<template>
    <div class="col-md-12">
        <div v-for="(comment, index) in list" :key="index">
            <div v-if="comment.parentId === 0">
                <hr>
                <a href="javascript:void(0)" >{{comment.commentUserName}}</a>
                <span title="点击回复该条评论" @click="writeReply(comment.id, comment.commentUserName, comment.userId)">:
                    {{comment.content}}
                </span>
                <br/>
            </div>
            <div v-if="comment.parentId !== 0">
                <a href="javascript:void(0)" >{{comment.commentUserName}}</a>
                回复
                <a href="javascript:void(0)" >{{comment.parentCommentUserName}}</a>
                <span title="点击回复该条评论" @click="writeReply(comment.id, comment.commentUserName, comment.userId)">:
                    {{comment.content}}
                </span>
                <br/>
            </div>

            <span v-if="comment.children">
                <comment :list="comment.children"></comment>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Comment",
        data(){
            return {
                loginUser: null
            }
        },
        props: {
            list: Array,
        },
        mounted() {
            this.loginUser = Tool.getLoginUser();
        },
        methods: {
            writeReply(parentId, name, commentUserId) {
                this.$parent.writeReply(parentId, name, commentUserId);
            }
        }
    }
</script>

<style scoped>

</style>